{% extends 'base.html' %}
<head>
    <script src="js/go.js"></script>
</head>
{% block main %}
<div class="container">
<form class="form-horizontal"  method="post" action="/addtask/{{  taskinfo.id}}">
    <div class="panel panel-default">
  <div class="panel-heading">
      <span class="glyphicon glyphicon-info-sign"></span>
      发布任务基本信息
  </div>
     <div class="panel-body">
         <table class="table table-bordered">
             <tbody>
             <tr>
                 <td>项目名称:</td>
                 <td>{{ taskinfo.project }}</td>
             </tr>
             <tr>
                 <td>环境:</td>
                 <td>{{ prinfo.env }}</td>
             </tr>
             <tr>
                 <td>仓库地扯</td>
                 <td>{{ prinfo.repo }}</td>
             </tr>
             <tr>
                 <td>线上路径</td>
                 <td>{{ prinfo.path }}</td>
             </tr>
                          <tr>
                 <td>发布版本</td>
                 <td>{{ taskinfo.tag }}</td>
             </tr>
                                       <tr>
                 <td>UID</td>
                 <td>{{ taskinfo.uid }}</td>
             </tr>
                                                    <tr>
                 <td>版本描述</td>
                 <td>{{ taskinfo.versioninfo }}</td>
             </tr>
                                       <tr>
                 <td>关联的服务器</td>
                 <td>{{ prinfo.servers}}</td>
             </tr>
                                                    <tr>
                 <td>执行状态</td>
                 <td>{{ taskinfo.status }}</td>
             </tr>
             </tbody>
         </table>
     </div>

        <div class="panel-heading">
                <div class="form-group">
      <button type="button" class="btn btn-primary" value="初使化" onclick="init()">初使化</button>
      <button type="button" class="btn btn-primary" value="发布">发布</button>
  </div>

      <span class="glyphicon glyphicon-info-sign"></span>
      执行状态
  </div>
 <div id="diagramDiv" style="width: 100%; height: 350px; background-color: #DAE4E4"></div>
    </div>
</form>
    </div>
    <div class="form-group">
    <div class="col-sm-10">
   <div class='series'>
       <div class="outline">
           <div class="series">
               <div class="line">
                   <hr>
               </div>
           </div>
       </div>


       </div>
   </div>
    </div>
</div>
<script>
function init() {
    const $ = go.GraphObject.make;
    const diagram = $(go.Diagram, "diagramDiv", {
        layout: $(go.TreeLayout, {
            angle: 0,
            nodeSpacing: 20,
            layerSpacing: 70
        })
    });
    console.log(diagram);
    diagram.nodeTemplate = $(go.Node, "Auto",
        $(go.Shape, {
            figure: "RoundedRectangle",
            fill: 'lightgray',
            stroke: 'lightgray'
        }, new go.Binding("figure", "figure"), new go.Binding("fill", "color"), new go.Binding("stroke", "color")),
        $(go.TextBlock, {margin: 8}, new go.Binding("text", "text"))
    );

    diagram.linkTemplate = $(go.Link,
        {routing: go.Link.Orthogonal},
        $(go.Shape, {stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.Shape, {toArrow: "OpenTriangle", stroke: 'lightgray'}, new go.Binding('stroke', 'link_color')),
        $(go.TextBlock, {font: '8pt serif', segmentOffset: new go.Point(0, -10)}, new go.Binding("text", "link_text"))
    );

    const nodeDataArray = [
       // {key: "backup", text: '备份', figure: 'Ellipse', color: "green"},
        {key: "download", parent: 'start', text: '下载代码', color: "green", link_color: 'green', link_text: '执行中...'},
        {key: "zip", parent: 'download', text: '编译打包'},
        {key: "c1", text: '服务器1', parent: "zip"},
        {key: "backup", parent: 'c1', text: '备份'},
        {key: "update", text: '升级', parent: "backup"},
        {key: "resertserivce", text: '服务重启', parent: "update"},
        {key: "c12", text: '升级完成', parent: "resertserivce"},
        {key: "c2", text: '服务器2', parent: "zip"},
        {key: "backup2", parent: 'c2', text: '备份'},
        {key: "update2", text: '升级', parent: "backup2"},
        {key: "resertserivce2", text: '服务重启', parent: "update2"},
        {key: "c12", text: '升级完成', parent: "resertserivce2"},
    ];
    diagram.model = new go.TreeModel(nodeDataArray);
}
</script>



</form>
{% endblock %}